<template>
  <div>
    <div class="box">
      <div class="header">
        <h4>试题录入</h4>
      </div>
      <div class="body">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="学科" prop="subjectID">
            <el-select v-model="form.subjectID" placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录" prop="catalogID">
            <el-select v-model="form.catalogID" placeholder="请选择" value="">
            </el-select>
          </el-form-item>
          <el-form-item label="企业" prop="enterpriseID">
            <el-select v-model="form.enterpriseID" placeholder="请选择">
              <el-option
                v-for="item in companyList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市" class="city" prop="city">
            <el-select
              v-model="form.province"
              @visible-change="getProvince"
              @change="getCity"
            >
              <el-option
                v-for="(item, index) in provincesOptions"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select v-model="form.city" placeholder="请选择">
              <el-option
                v-for="(item, index) in cityOptions"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" prop="direction">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型" prop="questionType">
            <el-radio-group v-model="form.questionType">
              <el-radio :label="1">单选</el-radio>
              <el-radio :label="2">多选</el-radio>
              <el-radio :label="3">简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度" prop="difficulty">
            <el-radio-group v-model="form.difficulty">
              <el-radio :label="1">简单</el-radio>
              <el-radio :label="2">一般</el-radio>
              <el-radio :label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干" prop="question">
            <quill-editor v-model="form.question"></quill-editor>
          </el-form-item>
          <el-form-item label="选项" class="choose">
            <el-radio-group class="el_radioall" v-model="form.options">
              <el-radio>
                <template #default>
                  <span>A ： </span>
                  <el-input size="medium"></el-input>
                  <input
                    type="file"
                    accept="image/*"
                    style="display: none"
                    ref="file"
                  />
                  <button class="avatar-uploader" @click="upload">
                    上传图片
                  </button>
                </template>
              </el-radio>
            </el-radio-group>
            <el-button type="danger" disabled>+增加选项与答案</el-button>
          </el-form-item>
          <el-form-item label="解析视频">
            <el-input size="medium" v-model="form.videoURL"></el-input>
          </el-form-item>
          <el-form-item label="答案解析" prop="answer">
            <quill-editor v-model="form.answer"></quill-editor>
          </el-form-item>
          <el-form-item label="题目备注" class="subject">
            <el-input type="textarea" v-model="form.remarks"></el-input>
          </el-form-item>
          <el-form-item label="试题标签">
            <el-select
              v-model="form.tags"
              placeholder="请选择活动区域"
              value=""
            >
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { simple } from '@/api/hmmm/subjects.js'
import { list } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction } from '@/api/hmmm/constants.js'
import { add, detail, update } from '@/api/hmmm/questions.js'

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      form: {
        subjectID: '',
        catalogID: '',
        province: '',
        city: '',
        enterpriseID: '',
        direction: '',
        questionType: 1,
        difficulty: 1,
        question: '',
        options: '',
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      subjectList: [],
      companyList: [],
      provincesOptions: [],
      cityOptions: [],
      direction: direction,
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [{ required: true }],
        difficulty: [{ required: true }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'blur' }
        ]
      }
    }
  },
  async created () {
    if (this.$route.query.id) {
      const ref = await detail({ id: this.$route.query.id })
      this.form = ref.data
    }
    const { data } = await simple()
    this.subjectList = data
    const res = await list({ pagesize: 10000 })
    res.data.items.forEach((item) => {
      if (item.company) {
        this.companyList.push({ label: item.company, value: item.id })
      }
    })
  },
  methods: {
    getProvince (value) {
      if (value) {
        this.provincesOptions = provinces()
      }
    },
    getCity (e) {
      if (e) {
        this.cityOptions = citys(e)
      }
    },
    async onSubmit () {
      try {
        await this.$refs.form.validate()
        if (this.$route.query.id) {
          await update(this.form)
          this.$message.success('修改成功')
        } else {
          await add(this.form)
          this.$message.success('添加成功')
        }

        this.$refs.form.resetFields()
        this.$router.push('/questions/list')
      } catch (error) {
        console.log(error)
      }
    },
    upload () {
      this.$refs.file.click()
    }
  }
}
</script>

<style scoped lang="less">
.box {
  margin: 20px;
  box-shadow: 0px 0px 20px #ccc;
}
.header {
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
  h4 {
    margin: 10px 0;
    font-weight: 400;
  }
}
.body {
  padding: 20px;
  background-color: #fff;
}
/deep/.el_radioall {
  display: flex;
  flex-direction: column;
  .el-radio__input {
    display: flex;
    align-items: center;
  }
  .el-radio {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  .el-radio__label {
    display: flex;
    align-items: center;
  }
  .avatar-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    width: 90px;
    height: 55px;
    border: 1px dashed #ccc;
    margin-left: 10px;
    background-color: #fff;
  }
}
.choose {
  /deep/.el-input__inner {
    width: 250px;
  }
  /deep/.el-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    font-size: 12px;
  }
}
/deep/.el-input__inner {
  width: 400px;
}
.city {
  /deep/ .el-input__inner {
    width: 197px;
    margin-right: 5px;
  }
}
.subject {
  /deep/.el-textarea__inner {
    width: 400px;
  }
}
/deep/.ql-blank {
  height: 176px;
}
</style>
